<template>
    <div class="dashboard-container">
        <el-form :rules="rules" ref="form" :model="temp">
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="公司名" prop="name">
                        <el-input placeholder="请输入" v-model="temp.name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="省份" prop="provinceId">
                        <el-select 
                                filterable 
                                clearable
                                v-model="temp.provinceId" 
                                placeholder="请选择" 
                                style="width: 100%;"
                                @change="handleChangeProvince"
                                :disabled="dialogType=='update'"
                            >
                                <el-option v-for="item,index in provinceList" :key="index" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="城市" prop="cityId">
                        <el-select 
                                filterable 
                                clearable
                                v-model="temp.cityId" 
                                placeholder="请选择" 
                                style="width: 100%;"
                                :disabled="dialogType=='update'"
                                @change="changeCity"
                            >
                                <el-option v-for="item,index in cityList" :key="index" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="区县" prop="areaId">
                        <el-select 
                                filterable 
                                clearable
                                v-model="temp.areaId" 
                                placeholder="请选择" 
                                style="width: 100%;"
                                :disabled="dialogType=='update'"
                            >
                                <el-option v-for="item,index in areaList" :key="index" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="企业类型" prop="patternId">
                        <el-select 
                                filterable 
                                clearable
                                v-model="temp.patternId" 
                                placeholder="请选择" 
                                style="width: 100%;"
                                :disabled="dialogType=='update'"
                            >
                                <el-option v-for="item in patternList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="详细地址" prop="detailAddress">
                        <el-input 
                            type="textarea"
                            :rows="2" 
                            placeholder="请输入" 
                            v-model="temp.detailAddress"
                        ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <!-- 操作按钮 -->
            <div>
                <el-button type="primary" @click="submit('form')">确定</el-button>
                <el-button type="primary" plain @click="handleBack">返回</el-button>
            </div>
        </el-form>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { companyCreate, companyInfo, companyUpdate } from '@/api/company';
import { patternGetList } from '@/api/pattern';
import { commonGetProvinceList, commonGetAreaList } from '@/api/common'
   
export default {
    name: 'CustomCompanyAdd',
    computed: {
      ...mapGetters([
        'name'
      ])
    },
    data(){
      return {
        rules: {
            name: [{ required: true, message: '请输入公司名称', trigger: 'blur' }],
            provinceId: [{ required: true, message: '请选择省份', trigger: 'blur' }],
            cityId: [{ required: true, message: '请选择城市', trigger: 'blur' }],
        },
        temp: {
            name: '',
            provinceId: '',
            userType: 2,
            cityId: '',
            name: '',
            patternId: '', // 公司模型
            parentId: '', //上级公司id
            detailAddress: ''
        },
        id: '',
        provinceList: [], //省份列表
        cityList: [], //城市列表
        patternList: [], //企业类型列表
        dialogType: 'create',
        areaList: []
      }
    },
    mounted(){
        this.id = this.$router.history.current.query.id;
        let parentId = this.$router.history.current.query.parentId;
        if(this.id){
            this.getInfo();
            this.dialogType = 'update'
        }
        if(parentId){
            this.temp.parentId = parentId;
        }
        this.getProvince();
        this.getPattern();
    },
  
    methods:{ 
        //修改城市
        async changeCity(val){
            // 请求区县信息
            let data = await commonGetAreaList({ geoLevel: 4, cityId: val })
            this.areaList = data;

            //清空之前的区县选择
            this.temp.areaId = '';
        },
        async getPattern(){
            let data = await patternGetList({ pageCount: 9999, type: 1 })
            this.patternList = data.list.map(item=>{
                return { label: item.name, value: item.id }
            })
        },
        handleBack(){
            this.$router.history.push({ path: '/custom/company' });
        },
        // 修改省份，同步更新城市列表
        handleChangeProvince(val){
            if(val){
                this.cityList = this.provinceList.filter(item=>item.id==val)[0].citys;
            }else{
                this.cityList = [];
            }
            
            this.temp.cityId = '';
            this.temp.areaId = '';
        },
        async getProvince(){
            let data = await commonGetProvinceList({ geoLevel: 2 });
            this.provinceList = data
        },
        //提交表单
        submit(formName){
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    if(this.dialogType =='create'){
                        //添加逻辑
                        await companyCreate(this.temp)
                        this.$message.success('创建成功')

                    }else{
                        //修改逻辑....
                        await companyUpdate(this.temp)
                        this.$message.success('修改成功')
                    }
                    this.$router.history.push({ path: '/custom/company' })
                }else {
                    console.log('error submit!!');
                    return false;
                }
            });         
        },
        async getInfo(){
            let data = await companyInfo({id: this.id  });
            this.temp = data;
        }
    }
}
</script>
  
<style lang="scss" scoped>
.dashboard {
    &-container {
      margin: 30px;
      position: relative;
      .right{
        position: absolute;
        right: 0;
        top: 0;
      }

      .page{
        padding: 20px 0;
        text-align: center;
      }
    }
    &-text {
      font-size: 30px;
      line-height: 46px;
    }
}
</style>